<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>
</head>
<body>
    <div id="box">
        <!-- 子传父靠的是事件 -->
        <!-- 导航栏 -->
        <!-- 定义在根组件中(方法)    @myevent自定义事件  没有带小括号的时候 -->
    <!-- 坑--- isw也要小写，驼峰不行 -->
        <navbar isw="isW" @myevent="changeshow"></navbar>
    <!-- 侧边栏 -->
    <siderbar v-show="isShow"></siderbar>
  

    </div>
  
    <script>
        Vue.component("navbar",{
            props:["isw"],
            template:`<div style="width: 100%;height: 150px;border: 3px solid;">
                
                <button @click="showAll">出现</button>{{isw}}
                </div>
            `,
           
            methods:{
                showAll(){
                    console.log("父类快把isShow取反")
                    // $emit固定用法,自定义的名称(是方法名称myevent而不是changeshow)  触发
                    // this.$emit("myevent")
                    // 也可以传递一些数据,状态
                    this.$emit("myevent",10000)
                }
            }
        }) 
        Vue.component("siderbar",{
            template:` <ul>
                 <li>sadfa</li>
                 <li>fasd</li>
                    </ul>
            `
        }) 
        // 根组件
        new Vue({
            el:"#box",
            data:{
                isShow:false,
                isW: 'ww'

            },
            methods:{
                // 没带小括号,可以接收一个data 可以收到传递过来的参数
                changeshow(data){
                    console.log("我是父类中的",data)
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>
</html>